<template>
  <div>
    <div class="title_box mt-30">
      <p class="title">变更信息</p>
      <div class="line"></div>
    </div>

    <div class="mt-16">
      <a-table :columns="modifyInfo" :data-source="modifyData" :pagination="modifypagination"
        :rowKey="(record) => record.id">
        <!-- <template #oldContent="{ text, record }">
          <div v-for="(item, index) in record.oldContent" :key="index">
            {{ item.key }}:{{ item.value }}
          </div>
        </template>
<template #newContent="{ text, record }">
          <div v-for="(item, index) in record.newContent" :key="index">
            {{ item.key }}:{{ item.value }}
          </div>
        </template> -->

        <div slot="oldContent" slot-scope="text,record">
          <div v-for="(item, index) in record.oldContent" :key="index">
            {{ item.key }}:{{ item.value }}
          </div>
        </div>
        <div slot="newContent" slot-scope="text,record">
          <div v-for="(item, index) in record.newContent" :key="index">
            {{ item.key }}:<span style="color:red">{{ item.value }}</span>
          </div>
        </div>

        <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
        <!-- <span slot="alterDate"> </span>
        <span slot="alterBef"> </span>
        <span slot="alterDate"> </span>
        <span slot="alterDate"> </span> -->
      </a-table>
    </div>
  </div>
</template>

<script>
import {
  getEntChangePageList,
} from "@/apis/EntBase";

import { getClientUseCompanyChange } from '@/apis/com/company'
import { computed } from "vue";
export default {
  props: {
    category: {
      default: [],
      type: Array
    }
  },
  data () {
    return {
      modifypagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.modifyonSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.modifyonPageChange(page, pageSize),
      },



      modifyData: [],
      modifyInfo: [
        {
          dataIndex: "index",
          title: "序号",
          width: 80,
          customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
        },
        {
          title: "变更事项",
          dataIndex: "alterItem",
          width: 200,
          ellipsis: true,
          // scopedSlots: { customRender: "alterItem" },
        },
        {
          title: "变更前内容",
          dataIndex: "oldContent",
          width: 350,
          ellipsis: true,
          scopedSlots: { customRender: "oldContent" },
        },
        {
          title: "变更后内容",
          dataIndex: "newContent",
          width: 350,
          ellipsis: true,
          scopedSlots: { customRender: "newContent" },
        },
        {
          title: "变更日期",
          dataIndex: "updateTime",
        },
      ],

      keyVal: {
        // logo: "企业logo",
        industry: "行业类别",
        incorporationDate: "成立日期",
        registeredCapital: "注册资金",
        address: "企业地址",
        site: "企业网站",
        linkMan: "联系人",
        linkTel: "手机号",
        natureBusiness: "经营范围",

      }
    }
  },
  mounted () {
    this.getEntChangePageList()
  },
  methods: {
    getTraditionalName (dictValue) {

      return this.category.find(item => item.dictValue == dictValue)?.dictLabel
    },
    // 变更信息  当前页码
    modifyonPageChange (page, pageSize) {
      this.modifypagination.current = page;
      this.getEntChangePageList();
    },
    // 变更信息   每页条数
    modifyonSizeChange (current, pageSize) {
      this.modifypagination.pageSize = pageSize;
      this.getEntChangePageList();
    },

    // 获取企业变更列表
    getEntChangePageList () {

      const that = this
      let _params = {
        pageNum: this.modifypagination.current,
        pageSize: this.modifypagination.pageSize,
        companyId: this.$route.query.id,
        type: 1,
        status: 1,
      };
      getClientUseCompanyChange(_params)
        .then((res) => {

          if (res.code == 200) {
            this.modifyData = res.rows.map(item => {

              const oldContent = JSON.parse(item.oldContent)

              const newContent = JSON.parse(item.newContent)


              let alterItem = ''

              const afterContentArr = []
              const beforeContentArr = []

              Object.keys(this.keyVal).forEach((key) => {
                if (oldContent[key] !== newContent[key]) {

                  if (key === 'industry') {
                    afterContentArr.push({
                      key: this.keyVal[key],
                      value: this.getTraditionalName(newContent[key])
                    })
                    beforeContentArr.push({
                      key: this.keyVal[key],
                      value: this.getTraditionalName(oldContent[key])
                    })
                  } else {

                    afterContentArr.push({
                      key: this.keyVal[key],
                      value: newContent[key] || '无'
                    })
                    beforeContentArr.push({
                      key: this.keyVal[key],
                      value: oldContent[key] || '无'
                    })
                  }

                  alterItem += `${this.keyVal[key]},`

                }
              })

              item.oldContent = beforeContentArr
              item.newContent = afterContentArr

              item.alterItem = alterItem.substring(0, alterItem.lastIndexOf(","))

              return item
            })
            console.log('获取企业变更列表+++++++++++', this.modifyData);
            this.modifypagination.total = res.total;
          }
        })
        .catch((error) => { });
    },
  }

}

</script>

<style lang="less" scoped>
.title_box {
  border-bottom: solid 1px #ebeef5;

  .title {
    font-size: 16px;
    line-height: 14px;
    letter-spacing: 0px;
    color: #303133;
  }

  .line {
    width: 20px;
    height: 4px;
    background-color: #188af1;
    margin-top: 8px;
  }
}
</style>